<template>
  <el-dialog :title="showTitle" @close="close" :visible.sync="showDialog"> <!-- 使用 :visible.sync -->
    <!-- 放置弹层内容 -->
    <el-form ref="addDept" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="formData.name" placeholder="2-10个字符" style="width:80%" size="mini" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="formData.code" placeholder="2-10个字符" style="width:80%" size="mini" />
      </el-form-item>
      <el-form-item prop="managerId" label="部门负责人">
        <!-- 下拉菜单 -->
        <el-select v-model="formData.managerId" placeholder="请选择负责人" style="width:80%" size="mini">
          <!-- :value="item.id" 的设置在于为每个 el-option 组件定义一个唯一的值。 -->
          <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="formData.introduce" placeholder="1-100个字符" style="width:80%" size="mini" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button @click="btnOK" size="min" type="primary">确定</el-button>
            <el-button @click="close" type="primary">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
  <script>
import { getDepartment } from '@/api/department'
import { getManagerList, addDepartment, getDepartmentDetail, updateDepartment } from '@/api/department'; // 确保路径和函数名正确
export default {
  props: {  //父组件给子组件传数据
    showDialog: {
      type: Boolean,
      default: false //这是 showDialog 属性的默认值。如果父组件没有传递该属性，则默认值为 false。
    },
    currentNodeId: {
      type: Number,
      required: true
    }
  }, data() {
    return {
      managerList: [],//部门负责人列表
      formData: {
        code: '',//部门编码
        introduce: '',//部门介绍
        managerId: '',//部门负责人id
        name: '',//部门名称
        pid: '',//父部门id，不需要做校验111

      }, rules: {
        code: [{ required: true, message: '部门的编码不能为空', trigger: 'blur' }, {
          min: 2, max: 10, message: '长度必须在2-10个字符之间', trigger: 'blur'
        }, {


          validator: async (rule, value, callback) => {
            //value是输入的值
            let result = await getDepartment()
            //判断是否是编辑模式 排除自身
            if (this.formData.id) {
              result = result.filter(item => item.id !== this.formData.id)
            }
            //result 数组中是否存在value值
            if (result.some(item => item.code === value)) {
              callback(new Error('部门编码已经存在'))
            } else {
              callback()
            }
          }
        }],//部门编码
        introduce: [{ required: true, message: '部门的介绍不能为空', trigger: 'blur' }, {
          min: 1, max: 100, message: '长度必须在1-100个字符之间', trigger: 'blur'
        }],//部门介绍
        managerId: [{ required: true, message: '部门的管理员不能为空', trigger: 'blur' }],//部门负责人id
        name: [{ required: true, message: '部门的名字不能为空', trigger: 'blur' }, {
          min: 2, max: 10, message: '长度必须在2-10个字符之间', trigger: 'blur'
        }, {
          validator: async (rule, value, callback) => {
            let result = await getDepartment()
            if (this.formData.id) {   //编辑状态
              result = result.filter(item => item.id !== this.formData.id)
            }
            if (result.some(item => item.name === value)) {
              callback(new Error('部门名称已经存在'))
            } else {
              callback()
            }
          }
        }],//部门名称
        //pid:'',//父部门id 不需要做校验

      }
    }
  }, computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }

  }, created() {
    this.getManagerList()//获取数据
  },
  methods: {
    close() {
      // 修改父组件的值，子传父
      //resetfields 只能重置在模板中绑定的数据
      this.formData = {}//重置数据
      this.$refs.addDept.resetFields()//重置表单
      //close(): 方法用于触发一个事件，通过 $emit 发送 update:showDialog 事件，将 showDialog 更新为 false。
      this.$emit('update:showDialog', false); // 确保父组件能接收到事件
    }, async getManagerList() {
      this.managerList = await getManagerList()

    },//点击确定时调用
    btnOK() {
      this.$refs.addDept.validate(async isOK => {
        if (isOK) {
          let msg = '新增'
          if (this.forData.id) {
            msg = '更新'
            //编辑场景
            await updateDepartment(this.forData)
          } else {
            //新增场景
            addDepartment({ ...this.formData, pid: this.currentNodeId })
          }

          //通知父组件
          this.$emit('updataDepartment')
          //提示消息
          this.$message.success(`${msg}成功`)
          this.close()
        }
      })
    },//获取组织的详情
    async getDepartmentDetail() {
      this.formData = await getDepartme// 1.点击添加部门的时候,保存被点击部门id
      // 2.将被点击的部门id,传到子组件
      // 3.从子组件内部把id传出来
      // ntDetail(this.currentNodeId)


    }
  }
}
  </script>
  
  <style scoped>
/* 这里可以添加样式 */
</style>